<template>
  <div id="type-table"></div>
</template>

<script>
  import { Column } from '@antv/g2plot';
  export default {
    name: "TypeTable",
    mounted() {
      const data  = [
        {
          "zone": "运动战",
          "times": 3,
          "type": "进球"
        },
        {
          "zone": "运动战",
          "times": 3,
          "type": "射门"
        },
        {
          "zone": "任意球",
          "times": 5,
          "type": "进球"
        },
        {
          "zone": "任意球",
          "times": 5,
          "type": "射门"
        },
        {
          "zone": "点球",
          "times": 5,
          "type": "进球"
        },
        {
          "zone": "点球",
          "times": 5,
          "type": "射门"
        },
      ];
      const stackedColumnPlot = new Column('type-table', {
        data,
        isStack: true,
        xField: 'zone',
        yField: 'times',
        color:['#C3EADF','#3FA27F'],
        yAxis:{
          grid:null,
          label:null,
          min:0,
          max:10
        },
        xAxis:{
          tickLine:null,
          label:{
            style:{
              fontSize:20,
              fontWeight:'bold',
              fill:'rgba(101, 111, 115, 0.75)'
            }
          },
        },
        seriesField: 'type',
        legend:false,
        minColumnWidth: 90,
        maxColumnWidth: 100,
        interactions: [{ type: 'active-region', enable: false }],
      });
      stackedColumnPlot.render();
    }
  }
</script>

<style scoped>
  #type-table {
    width: 275px;
    height: 150px;
  }
</style>